<template>
    <div>
    
    
    
    
    
    
    
        <div>B</div>
    
    
    
        <!-- <input type="checkbox"  value="reading" id="readingID" v-model="checked">
    
            <label for="readingID">reading</label>
    
    
    
            <input type="checkbox"  value="play" id="playID" v-model="checked">
    
            <label for="playID">reading</label> -->
    
        ........
    
        <!-- <myblog-posta title="aa" @event-name="fufn"></myblog-posta> -->
    
        <!-- 
    
                <div :is="xixi"></div>
    
            <button @click="change1"> post1 </button>
    
            <button @click="change2"> post2 </button>
    
            <button @click="change3"> post3 </button>
    
            <button @click="change4"> post4 </button>
    
            <radio-button v-model="selectedValue" label="Option 1"></radio-button>
    
            <radio-button v-model="selectedValue" label="Option 2"></radio-button>
    
            <radio-button v-model="selectedValue" label="Option 3"></radio-button> -->
    
    
    
        <!-- <div class="big-box" @click.capture="bigHandle">1111
    
        
    
                <div class="zi-box" @click="ziHandle">
    
        
    
                    2222
    
        
    
                </div>
    
        
    
            </div> -->
    
    
    
        <!--     
    
        
    
                <select name="" id="">
    
        
    
            
    
        
    
                        <option value="1">AAA</option>
    
        
    
            
    
        
    
                        <option value="2">BBB</option>
    
        
    
            
    
        
    
                        <option value="3">CCC</option>
    
        
    
            
    
        
    
                    </select> -->
    
    
    
        <!-- <input type="text" v-model="xixi">
    
                    <input type="text" :value="xixi" @input="$emit('input', xixi = $event.target.value)">
    
                    {{ xixi }} -->
    
        <!-- <myblog-post3 :title="xixi" @input="xixi = $event"></myblog-post3> -->
    
        <!-- <myblog-post3 v-model="xixi"></myblog-post3>
    
                    {{ xixi }} -->
    
    
    
        <!-- 写法一  mode + v-model    -->
    <div>1111</div>
        <base-checkbox v-model="lovingVue"></base-checkbox>
        <div>1111</div>
{{ lovingVue }}
<div>1111</div>
    
        <!-- 写法二(组件不需要配置mode) v-bind + v-on  -->
    
        <!-- <base-checkbox 
    
                        :value="lovingVue" 
    
                        @change="lovingVue = $event"
    
                        ></base-checkbox>
    
                     {{ lovingVue }} -->
    
    
    
        <!-- :num.sync="num"      @update="fnfu"  -->
    
        <!-- <base-checkbox 
    
                     :num="num"
    
                     @update:num="num = $event"
    
                     />
    
              
    
                     <base-checkbox 
    
                     :num.sync="num"
    
                     ></base-checkbox>
    
         -->
    
         <input v-model.number="age" type="number" placeholder="xxxx">



        <base-checkbox :num.sync="num"></base-checkbox>
    
        <button v-on:click="show = !show">
            Toggle
          </button>
          <transition name="fade">
            <p v-if="show">hello</p>
          </transition>
          <p v-if="show">hello</p>
          {{ nickName }}
        <!-- <blog-post-slot>
    
            <template #myheader>
    
              <div>
    
                myheader==myheader==myheader
    
              </div>
</template>
<template #myfooter>
    <div>
    
        myfooter==myfooter==myfooter
    
    </div>
</template>
<template>
    <div>
    
        default==default==default
    
    </div>
</template>
      </blog-post-slot> -->
    </div>
</template>
<script>
import { mixins2 } from '@/utils/mixin';
var myMixin = {
  created: function () {
    this.hello()
  },
  data() {
    return {
      nickName: '全局混入222222222222222222222222222222222222222',
      name: '测试是否导入成功',
      mysex: '男',
      age: undefined,
    };
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
export default {
    name: 'bCompontent',
    mixins: [myMixin,mixins2,],
    provide(){
        return{
            foo: 'bar66666666666666666666666'
        }
    },

    data() {
        return {
            checked: false,
            age: undefined,
            xixi: 'myblog-post1',
            lovingVue: true,
            num: 'XXX',
            show: true,
        }
    },
    created() {
        // console.log('query=>', this.$route.query)
        // console.log('params=>', this.$route.params)
    },
    methods: {
        bigHandle() {
            console.log('111');
        },
        ziHandle() {
            console.log('222');
        },
        fufn(value) {
            console.log('-->', value);
        },
        change1() {
            this.xixi = 'myblog-post1'
        },
        change2() {
            this.xixi = 'myblog-post2'
        },
        change3() {
            this.xixi = 'myblog-post3'
        },
        change4() {
            this.xixi = 'MyBlogPost4'
        },
    }
}
</script>
<style scoped>
.fade-enter, .fade-leave-to {
    opacity: 0;
  }
   
  .fade-enter-to, .fade-leave {
    opacity: 1;
  }
   
  .fade-enter-active, .fade-leave-active {
    transition: opacity 3s
  }
  
</style>